<!DOCTYPE html>
<html>
<header>
	<title>第一个Vue程序</title>
	<meta charset="UTF-8" >
	<!-- 引入ElementPlus样式 -->
	<link rel="stylesheet" href="static/element-plus.css" />
	<!-- 引入Vue框架代码 -->
	<script src="static/vue.js"></script>
	<!-- 引入ElementPlus框架代码 -->
	<script src="static/element-plus.js"></script>
	<!-- 引入axios框架代码 -->
	<script src="static/axios.min.js"></script>
</header>
<body>

<div id="app">
	<el-form
			style="max-width: 600px"
			:model="formData"
			:rules="formRules"
			ref="formRef"
			status-icon
			label-width="auto"
			class="demo-ruleForm"
	>
		<el-form-item label="用户名" prop="name">
			<el-input v-model="formData.name" type="text" autocomplete="off" />
		</el-form-item>
		<el-form-item label="密码" prop="pass">
			<el-input v-model="formData.pass" type="password" autocomplete="off" />
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submit">
				登录
			</el-button>
		</el-form-item>
	</el-form>
</div>
<script>
	const { createApp, ref } = Vue
	const { ElMessage } = ElementPlus

	const service = axios.create({
		baseUrl: "",
		timeout: 9000,
		headers:{
			'Content-Type':'application/json'
		}
	})

	createApp({
		setup() {
			const formData = ref({name:"admin", pass:"123456"})


			const formRules = {
				name:[{required: true,message: '请输入用户名',trigger: 'blur'}],
				pass:[{required: true,message: '请输入密码',trigger: 'blur'}]
			};

			const formRef = ref();

			const submit = ()=>{
				formRef.value.validate((re)=>{
					if(re){
						service.post("login", formData.value).then(res=>{
							if(res.data.code==200){
								ElMessage.success("登陆成功")
								setTimeout(()=>{
									location.href="demo"
								},1000)
							}else{
								ElMessage.error(res.data.msg)
							}

						}).catch(res=>{
							ElMessage.error("登录失败")
						})
					}else{
						ElMessage.error("请输入用户名或者密码")
					}
				})

			}
			return {
				formData, formRules, submit, formRef
			}
		}
	}).use(ElementPlus).mount('#app')
</script>
</body>
</html>